<template>
	<div style="padding: 20px;">
		<div ref="biaotou">
			<el-form inline :model="formData">
				<el-form-item label="查询人">
					<el-select v-model="formData.userId" filterable clearable>
						<el-option v-for="item in $store.state.AllUsers" :value="item.Id" :label="item.UserName"
							:key="item.Id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="数据年份">
					<el-date-picker type="year" value-format="yyyy" v-model="formData.SettlementNumber"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  @click="getTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<div style="margin-bottom: 10px;">
				<el-button type="success" @click="PersonnelSocialSecurityShow = true">添加社保</el-button>
				<el-button type="warning" @click="ExportYeaspayrollHandler">导出</el-button>
			</div>
		</div>
		<div>
			<el-row>
				<el-col :span="24">
					<el-table :height="tableStyle+'px'" :data="payrollList" border show-summary :summary-method="getSummaries" v-loading="tableLoading">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column type="index" label="序号" width="50" align="center"
							:index="indexMethod"></el-table-column>
						<el-table-column label="姓名" align="center" prop="UserName"></el-table-column>
						<el-table-column label="收方总金额" align="center" prop="FormuserTotalPrice"></el-table-column>
						<el-table-column label="管理费" align="center" prop="Managementfee"></el-table-column>
						<el-table-column label="生活费总金额" align="center" prop="LivingExpensesTotal"></el-table-column>
						<el-table-column label="余额" align="center" prop="Balance"></el-table-column>
						<el-table-column label="报销金额" align="center" prop="ReimRuleTotal"></el-table-column>						
						<el-table-column label="社保" align="center" prop="SocialInsurance"></el-table-column>						
						<el-table-column header-align="center" prop="UserNumber" align="center" label="操作" width="80">
							<template slot-scope="scope">
								<el-button type="text" plain size="mini"
									@click="GetPayrollInfo(scope.row)">详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24" align="right">
					<el-pagination @size-change="getTableData" @current-change="getTableData"
						:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
						:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
						:total.sync="pagination.total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
		
		<el-dialog :visible.sync="ProjectFinanceShow.show" :title="ProjectFinanceShow.title" width="98%"  :append-to-body='true' @close="ProjectFinanceShow.show= false">
			<ProjectFinanceDetails :parameter="childParameter" :FormuserInfo="DetailsFormuserInfo" :ReimRuleInfo="DetailsReimRuleInfo"></ProjectFinanceDetails>
		</el-dialog>
		<!-- <el-dialog v-if="Apply_Entry.show" :visible.sync="Apply_Entry.show" width="100%" :modal="false" 
			:title="Apply_Entry.title" :fullscreen="true">
			<ApplyIndex @updataList="formdata" :project="Apply_Entry.project"></ApplyIndex>
		</el-dialog> -->
		
		<el-dialog :visible.sync="PersonnelSocialSecurityShow" title="人员年度社保" width="80%" top="10px" :append-to-body='true' @close="PersonnelSocialSecurityShow = false">
			<PersonnelSocialSecurity :dialogshow="PersonnelSocialSecurityShow"></PersonnelSocialSecurity>
		</el-dialog>
	</div>
</template>

<script>
	import {
		Message,
		Switch
	} from 'element-ui'
	import * as publicjs from "../../../public/Scriput/Public"
	import UploadFileF from "../UploadFileF";
	import ProjectFinanceDetails from './ProjectFinanceDetails'
	import PersonnelSocialSecurity from './PersonnelSocialSecurity.vue'
	import dayjs from 'dayjs';
	export default {
		components: {
			UploadFileF,ProjectFinanceDetails,PersonnelSocialSecurity
		},
		data() {
			return {
				payrollList: [],
				formData: {
					projectId: '',
					userId: '',
					payrollFormType: 1,
					createTime: "",
					emdTime: "",
					SettlementNumber:dayjs(Date()).format('YYYY'),
				},
				AllProject: [],
				//分页数据绑定
				pagination: {
					currentPage: 1,
					pagesizes: [10, 50, 100, 300, 500],
					pagesize: 10,
					total: 0,
				},
				tableLoading:false,
				childParameter:{},
				//ProjectFinanceShow:false,
				ProjectFinanceShow:{
				show: false,
				project: {},
				title: "详情"
			},
				PersonnelSocialSecurityShow:false,
				DetailsFormuserInfo:[],
				DetailsReimRuleInfo:[],
				tableStyle:500,
			}
		},
		computed: {

		},
		created() {
			publicjs.http(this.$http, this.$message)
			this.AllProject = publicjs.GetAllProject(this.$http)
		},
		mounted() {
			this.$nextTick(() => {
				this.getTableData()
			})
			window.addEventListener('resize',()=>{
				this.tableHeightJiSuan()
			})
		},
		methods: {
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			chaEr(row) {
				const {
					ShouldTotalPrice,
					RealTotalPrice
				} = row || 0
				return Number(ShouldTotalPrice) - Number(RealTotalPrice)
			},
			//页面初始数据获取
			getTableData() {
				this.tableLoading = true
				let _this = this
				this.$http.post('FinanceManagement/SelFinanceManagement', {
					userId: this.formData.userId,
					SettlementNumber:this.formData.SettlementNumber,
					pageSize: this.pagination.pagesize,
					pageIndex: this.pagination.currentPage,
				}).then(res => {
					const {
						StatusCode,
						Data,
						TotalCount
					} = res.data || 0
					if (StatusCode == 200) {
						this.payrollList = Data.map(x => {
							return {
								...x,
								chaErMoney: _this.chaEr(x)
							}
						})
					} else {
						this.payrollList = []
						this.$message.warning('获取财务获取工资单失败,请重试!')
					}
					this.pagination.total = TotalCount
					this.tableLoading = false
					this.tableHeightJiSuan()
				})
			},
			//获取数据描述
			getDataMessage(type, name, row) {
				const {
					UserId,
					ProjectId
				} = row || null
				let messaga = ''
				let Obj
				switch (type) {
					case 'project':
						Obj = this.AllProject.find(x => x.Id == ProjectId)
						break;;
					case 'user':
						Obj = this.$store.state.AllUsers.find(x => x.Id == UserId)
						break;
				}
				if (Obj) {
					messaga = Obj[name]
				}
				return messaga
			},
			//获取详情
			GetPayrollInfo(row) {
				this.childParameter = {
					// projectId: row.ProjectId,
					userId: row.UserId,
					// createTime: this.formData.createTime,
					// emdTime: this.formData.emdTime
				}
				this.ProjectFinanceShow.show = true;
				this.ProjectFinanceShow.title='详情--'+row.UserName;
				this.DetailsFormuserInfo = row.FormuserInfo[0] == undefined ? [] : row.FormuserInfo[0];
				this.DetailsReimRuleInfo = row.ReimRuleInfo[0] == undefined ? [] : row.ReimRuleInfo[0];
				// this.$http.post('PayrollForm/GetPayrollInfo', {
				// 	projectId: row.ProjectId,
				// 	userId: row.UserId,
				// 	createTime: this.formData.createTime,
				// 	emdTime: this.formData.emdTime
				// }).then(res => {
				// 	const {
				// 		StatusCode,
				// 		Data
				// 	} = res.data || 0
				// 	if (StatusCode == 200) {

				// 	} else {
				// 		this.$message.warning('获取财务获取工资单失败,请重试!')
				// 	}
				// })
			},
			//表格数据合集
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价1';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								let sum =  parseFloat(prev)  + parseFloat(curr)
								return sum.toFixed(2);
							} else {
								return prev.toFixed(2);
							}
						}, 0);
						sums[index] += ' 元';
					} else {
						sums[index] = '';
					}
				});
				return sums;
			},
			//导出年度工资单
			ExportYeaspayrollHandler(){
				this.$http.post('FinanceManagement/ExportYeaspayroll', {
					pageIndex: 0,
					pageSize: 0,
					// userId: this.formData.userId == ''?0:this.formData.userId,
					settlementNumber: this.formData.SettlementNumber == null||''?'':this.formData.SettlementNumber
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						//文件下载
						publicjs.DownLoadFile({
							...Data
						})
					} else {
						this.$message.warning(Message)
					}
				})
			},
			//表格高度计算
			tableHeightJiSuan(){
				this.tableStyle = document.body.clientHeight - this.$refs.biaotou.clientHeight - 84
			},
		}
	}
</script>

<style scoped>
</style>